<template>
	<view class="customHeader">
		<view class="bg">
			<image class="bgimg" src="../../static/images/rencai03.jpg" mode="aspectFill"></image>
		</view>
		<view class="container m"> 
			<view class="statusBar" :style="{height:statusBarHeight+'px'}" >
			</view>
			<view class="service" :style="{height:titleBarHeight+'px'}" v-if="!foldState">
				<view class="kefu">
					<u-icon name="server-fill" size="22" color="#fff"></u-icon>
				</view>
				<navigator class="manage">
					<u-icon name="bag-fill" size="22" color="#fff"></u-icon>
					后台管理
				<!-- 	<view class="">
						{{vuexName}}-{{vuexValue1}}
					</view> -->
				</navigator>
			</view>
			<view class="brand" :class="foldState?'fold':''">
				<view class="title">
					<view class="pic">
						<image class="img" src="../../static/images/rencai03.jpg" mode="aspectFill"></image>
					</view>
					<view class="txt">
						<view class="h1">
							咸虾米小店
							<u-icon name="more-circle" color="#fff" size="22"></u-icon>
						</view>
						<view class="h2">
							欢迎光顾咸虾米小店，该小店内的商品都是优选最新鲜的...
						</view>
					</view>
				</view>
				<view class="fukuan">
					<view class="pic">
						<image class="img" src="../../static/images/ewm.png" mode="aspectFill"></image>
					</view>
					付款
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	// import Vuex from 'vuex';
	// import {mapState} from 'vuex';
	export default {
		name:"custom-head-bar",
		data() {
			return {
				statusBarHeight:0,
				titleBarHeight:0
			};
		},
		computed:{
			// ...mapState(['vuexValue1','vuexName'])
		},
		props:{
			foldState:{
				type:Boolean,
				default:false,
			},
		},
		// 组件的生命周期没有onload
		mounted(){
			let systemInfo = uni.getSystemInfoSync();
			console.log( systemInfo);
			//手机状态栏高度
			this.statusBarHeight = systemInfo.statusBarHeight || 20;
			// #ifdef MP-WEIXIN
			let menuBtnInfo = uni.getMenuButtonBoundingClientRect(); 
			console.log('胶囊按钮：' + menuBtnInfo.height,menuBtnInfo.top,this.statusBarHeight);
			this.titleBarHeight = menuBtnInfo.height + (menuBtnInfo.top - this.statusBarHeight)*2;
			console.log('标题栏高度：'+this.titleBarHeight)
			// #endif
			
			// #ifndef MP-WEIXIN
			this.titleBarHeight = 40
			// #endif
		}
	}
</script>

<style lang="scss" scoped> 
	.m{ padding: 0 30rpx; box-sizing: border-box;}
	.customHeader{ width: 100%; overflow: hidden; flex-shrink: 0; position: relative; padding-bottom: 30rpx;
	 .bg{ width: 100%; height: 100%; position: absolute; left:0; top:0;
		.bgimg{ width: 100%; height: 100%; filter: blur(30rpx); transform: scale(2);}
	 }
	 .container{ position: relative;width: 100%; height: 100%; z-index: 9;
		.statusBar{ }
		.service{ @include flex-box-set(start); color:#fff; font-size: 30rpx;
			@include flex-box-set(start);
			.kefu{ color:#fff;}
			.manage{ @include flex-box-set(start); color:#fff; margin-left: 22rpx;
			}
		}
		.brand{ @include flex-box(); gap:30rpx; padding: 20rpx 0; transition:.3s;
			.title{ @include flex-box-set(start); gap:30rpx;
				.pic{ transition:.3s;
					width: 110rpx; height:110rpx; border-radius: 50%; overflow: hidden; flex-shrink: 0;
					.img{ width: 100%; height:100%;}
				}
				.txt{ color:#fff;
					.h1{ font-size: 36rpx; @include flex-box-set(start); gap:10rpx; margin-bottom: 10rpx;}
					.h2{ font-size: 26rpx; opacity:.8; @include ellipsis(); width: 400rpx;}
				}
			}
			.fukuan{ flex-shrink: 0; @include flex-box(); flex-direction: column; color: #fff; font-size: 28rpx; border-left:1px solid rgba(255,255,255,.5); padding-left: 20rpx;
				.pic{ width: 40rpx; height:40rpx; margin-bottom: 10rpx;
					.img{ width:100%; height:100%;}
				}
			}
			&.fold{ padding: 0; height:80rpx;
				.title{
					.pic{ width: 70rpx; height:70rpx}
					.txt{
						.h1{ font-size: 32rpx;}
						.h2{ display:none;}
					}
				}
				.fukuan{ display: none;}
			}
		}
	 }
	 
	}
</style>